<template>
  <el-aside
    :width="isShow ? '200px' : '64px'"
    :style="{ background: this.$store.state.bodycolor }"
  >
    <el-menu
      router
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      :collapse="!isShow"
      :collapse-transition="false"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span slot="title">后台首页</span>
        </template>
        <el-menu-item index="/home/index">首页</el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span slot="title">用户管理</span>
        </template>
        <el-menu-item index="/home/userlist">用户列表</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-management"></i>
          <span slot="title">权限管理</span>
        </template>
        <el-menu-item index="/home/admin/adminlist">权限列表</el-menu-item>
        <el-menu-item index="/home/admin/powerlist">角色列表</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-s-goods"></i>
          <span slot="title">商品管理</span>
        </template>
        <el-menu-item index="/Home/Production/ProductionList"
          >商品列表</el-menu-item
        >
        <el-menu-item index="/Home/Production/AddProduction"
          >添加商品</el-menu-item
        >
        <el-menu-item index="/Home/Production/ProductionClassification"
          >商品分类</el-menu-item
        >
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-s-order"></i>
          <span slot="title">订单管理</span>
        </template>
        <el-menu-item index="/home/orders">订单列表</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">
          <i class="el-icon-s-open"></i>
          <span slot="title">页面美化</span>
        </template>
        <el-menu-item index="/home/beautification">美化</el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  props: ["isShow"],
};
</script>

<style scoped lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {

overflow: hidden;
}
.el-aside {
  height: 100%;
}
</style>
